<template>
  <div id="chargesDetails">
    <top-bar class="charges-details-topbar" :title="title" v-show="IsTopbar" v-if="!hideTopBar"></top-bar>
    <div class="charges_hd">
      <p>{{routeName}}</p>
    </div>
    <div class="charges_box">
      <div class="charges_list" v-if="orderType == '拼车'">
        <p class="charges_list_one">
          起步价({{passengersNum }}人)
          <span>{{basePrice}}元</span>
        </p>
        <p class="charges_list_two">拼车：{{basePrice}}元/人</p>
      </div>
      <div class="charges_list" v-else>
        <p class="charges_list_one">
          起步价({{carType}})
          <span>{{basePrice}}元</span>
        </p>
        <p class="charges_list_two">包车：{{basePrice}}元</p>
      </div>
      <div class="charges_list" v-show="floatTotalPricestatus">
        <div v-if="orderType == '包车'">
          <div v-if="beyondMileage">
            <p class="charges_list_one" v-if="carType == '公务车'">
              里程费({{gongwuStartMileage}}公里)
              <span>{{floatTotalPrice}}元</span>
            </p>
            <p class="charges_list_one" v-else>
              里程费({{shangwuStartMileage}}公里)
              <span>{{floatTotalPrice}}元</span>
            </p>
            <p class="charges_list_two">超出里程({{beyondMileage}}公里)费用：{{ floatPrice }}元/公里</p>
          </div>
        </div>
      </div>
      <div class="charges_list" v-show="sitePriceTotalstatus">
        <p class="charges_list_one">
          站点浮动费
          <span>{{sitePriceTotal}}元</span>
        </p>
        <p class="charges_list_two">站点上车有浮动费用</p>
      </div>
      <div class="charges_list" v-show="fencePriceTotalstatus">
        <p class="charges_list_one" v-if="orderType == '拼车'">
          围栏浮动费
          <span>{{fencePriceTotal}}元</span>
        </p>
      </div>
      <div class="charges_list" v-show="adjustFlag">
        <p class="charges_list_one">
          运价调整({{adjustRadix}})
          <span>{{adjustPrice}}元</span>
        </p>
        <p class="charges_list_two">{{adjustReason}}</p>
      </div>
      <div class="charges_list" v-if="orderType == '包车'">
        <p class="charges_list_one" v-show="IssleepPrice">
          高速费
          <span>{{sleepPrice}}元</span>
        </p>
      </div>
      <p class="chargesAmt">合计：{{orderAmt}}元</p>
      <p class="charges_coupon" v-show="couponPricestatus">
        优惠券抵扣
        <span>-{{couponPrice}}元</span>
      </p>
      <p class="estimateAmt">
        预计支付
        <span>{{orderAmt}}元</span>
      </p>
      <p class="faremin">*车费计算四舍五入取小数点后两位</p>
      <p class="seeValuationRules" @click="ValuationRulesBtn">查看计价规则</p>
    </div>
  </div>
</template>

<script>
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
export default {
  name: 'charge-details',
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [InputItem.name]: InputItem
  },
  props: {
    costId: {
      type: String,
      default: undefined
    },
    hideTopBar: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '费用明细',
      routeName: '', // 路线名称
      orderAmt: '0.00', // 订单费用
      couponPrice: '0.00', // 优惠券金额
      payAmt: '0.00', // 实际支付金额
      carpoolPrice: '0.00', // 拼车起步价
      passengersNum: 1, // 人数
      basePrice: '0.00', // 拼车起步总价
      beyondMileage: '1', // 超出里程数
      floatPrice: '0.00', // 超出里程费/每公里
      floatTotalPrice: '0.00', // 超出里程总费用
      orderType: '',
      payType: '', // 订单类型
      carType: '', // 包车类型
      shangwuStartPrice: '0.00', // 商务车起步价
      shangwuStartMileage: '0', // 商务车起步里程数
      gongwuStartPrice: '0.00', // 公务车起步价
      gongwuStartMileage: '0', // 公务车起步里程数
      banJump: true, // 禁止跳转到计价规则
      sleepPrice: '', // 高速费
      IssleepPrice: false, // 是否显示高速费
      IsTopbar: true,
      couponPricestatus: true,
      fencePriceTotal: '0.00', // 围栏浮动总价
      sitePriceTotal: '0.00', // 站点浮动总价
      floatTotalPricestatus: true,
      sitePriceTotalstatus: true,
      fencePriceTotalstatus: true,
      adjustFlag: false, // 是否有调整价格
      adjustRadix: '',
      adjustReason: '',
      adjustPrice: ''
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    let id = this.$route.query.orderno;
    if (!id) {
      id = this.costId;
    }
    if (id !== '') {
      let params = {
        cost_id: id
      };
      Loading.show();
      http.post('/pakj/order/getCostEstimatDetail', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.routeName = res.data.data.routeName;
          this.orderType = res.data.data.orderType;
          this.passengersNum = res.data.data.passengersNum;
          this.carpoolPrice = res.data.data.carpoolPrice;
          this.basePrice = res.data.data.basePrice;
          this.carType = res.data.data.carType;
          this.beyondMileage = res.data.data.beyondMileage;
          this.floatTotalPrice = res.data.data.floatTotalPrice;
          this.floatPrice = res.data.data.floatPrice;
          this.sitePriceTotal = res.data.data.sitePriceTotal;
          this.shangwuStartPrice = res.data.data.shangwuStartPrice; // 商务车起步价
          this.shangwuStartMileage = res.data.data.shangwuStartMileage; // 商务车起步里程
          this.gongwuStartPrice = res.data.data.gongwuStartPrice; // 公务车起步价
          this.gongwuStartMileage = res.data.data.gongwuStartMileage; // 公务车起步里程
          this.sleepPrice = res.data.data.sleepPrice; // 高速费
          this.orderAmt = res.data.data.orderAmt;
          this.couponPrice = res.data.data.couponPrice;
          this.payType = res.data.data.payType;
          this.payAmt = res.data.data.payAmt;
          this.fencePriceTotal = res.data.data.fencePriceTotal;
          if (
            this.floatTotalPrice === '0.00' ||
            this.floatTotalPrice === '0' ||
            this.floatTotalPrice === '0.0' ||
            this.floatTotalPrice === undefined
          ) {
            this.floatTotalPricestatus = false;
          }
          if (
            this.sitePriceTotal === '0.00' ||
            this.sitePriceTotal === '0' ||
            this.sitePriceTotal === '0.0' ||
            this.sitePriceTotal === undefined
          ) {
            this.sitePriceTotalstatus = false;
          }
          if (
            this.fencePriceTotal === '0.00' ||
            this.fencePriceTotal === '0' ||
            this.fencePriceTotal === '0.0' ||
            this.fencePriceTotal === undefined
          ) {
            this.fencePriceTotalstatus = false;
          }
          if (
            this.couponPrice === '0.00' ||
            this.couponPrice === '' ||
            this.couponPrice === '0.0' ||
            this.couponPrice === undefined
          ) {
            this.couponPricestatus = false;
          }
          if (res.data.data.adjustFlag === '1') {
            this.adjustFlag = true;
            let adjustDetail = JSON.parse(res.data.data.adjustDetail);
            this.adjustRadix = adjustDetail.adjustRadix;
            this.adjustReason = adjustDetail.adjustReason;
            this.adjustPrice = adjustDetail.adjustPrice;
          }
          if (this.sleepPrice !== '0') {
            this.IssleepPrice = true;
          }
          console.log(res.data);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    ValuationRulesBtn() {
      this.$emit('gotoRules');
      let id = this.$route.query.orderno;
      if (!id) {
        id = this.costId;
      }
      this.$router.push({
        name: 'beforevaluationRules',
        query: {
          orderno: id
        }
      });
    }
  },
  computed: {
    startPrice() {
      if (this.carType === '公务车') {
        return this.gongwuStartPrice;
      } else {
        return this.shangwuStartPrice;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails {
  height: 100vh;
  background-color: #fff;

  .charges-details-topbar {
    margin-bottom: 20px;
  }
}

.charges_hd {
  background-color: #fff;
}

.charges_hd p {
  padding-top: 70px;
  text-align: center;
  font-size: 36px;
  color: #333;
  padding-bottom: 40px;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
}

.charges_list_one span {
  float: right;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.chargesAmt {
  padding-top: 40px;
  font-size: 28px;
  color: #333;
  text-align: right;
}

.charges_coupon {
  font-size: 28px;
  padding-top: 40px;
  color: #FF6917;
}

.charges_coupon span {
  float: right;
}

.estimateAmt {
  font-size: 28px;
  padding-top: 80px;
  color: #666;
  text-align: right;
}

.estimateAmt span {
  font-size: 40px;
}

.faremin {
  font-size: 22px;
  padding-top: 4px;
  color: #999;
  text-align: right;
}

.seeValuationRules {
  width: 260px;
  height: 88px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  line-height: 88px;
  margin: 108px auto 0px auto;
  text-align: center;
  font-size: 30px;
  color: #666;
}
</style>
